<template>
    <div class="login_container">
        <!-- 对话框组件 -->
        <el-dialog v-model="userStore.dialogFormVisible" title="用户登录">
            <el-row>
                <!-- 左侧登录部分 -->
                <el-col :span="12">
                    <div class="login">
                        <!-- 手机号登录 -->
                        <div id="phone" v-show="scene === 0">
                            <el-form :model="loginParam" :rules="rules" ref="form">
                                <el-form-item prop="phone">
                                    <el-input v-model="loginParam.phone" placeholder="请输入手机号码"
                                        :prefix-icon="User"></el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input :disabled="isPhone ? false : true" v-model="loginParam.code"
                                        placeholder="请输入手机验证码" :prefix-icon="Lock"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="getCode" :disabled="!isPhone || flag ? true : false">
                                        <CountDown v-if="flag" :flag="flag" @getFlag="getFlag"></CountDown>
                                        <p v-else>获取验证码</p>
                                    </el-button>
                                </el-form-item>
                            </el-form>
                            <div class="bottom">
                                <el-button @click="login" :disabled="!isPhone || loginParam.code.length < 6 ? true : false"
                                    style="width: 100%;" type="primary">用户登录</el-button>
                                <p @click="changeWechat">微信扫码登录</p>
                                <svg @click="changeWechat" t="1685263287521" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2450" width="32" height="32">
                                    <path
                                        d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                                        fill="#28C445" p-id="2451"></path>
                                    <path
                                        d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                                        fill="#28C445" p-id="2452"></path>
                                </svg>
                            </div>
                        </div>
                        <!-- 微信登录 -->
                        <div id="wechat" class="wechatContainer" v-show="scene === 1">
                            <!-- 放二维码的容器 -->
                            <div id="login_container"></div>
                            <div class="phone" @click="gotoPhoneLogin">
                                <p>手机短信验证码登录</p>
                                <svg t="1706455649763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5135" width="16" height="16"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="5136"></path></svg>
                            </div>
                        </div>
                    </div>
                </el-col>

                <!-- 右侧关注部分 -->
                <el-col :span="12">
                    <div class="focus">
                        <!-- 顶部二维码关注区域 -->
                        <div class="top">
                            <div class="wechat">
                                <img src="../../assets/images/code_login_wechat.png">
                                <svg t="1706347469796" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4227" width="16" height="16">
                                    <path
                                        d="M669.184 369.152c10.24 0 19.968 0.512 30.208 2.048-27.136-126.464-162.304-220.16-316.416-220.16-172.544 0-313.856 117.76-313.856 266.752 0 86.016 47.104 157.184 125.44 211.968l-31.232 94.208 109.568-54.784c39.424 7.68 70.656 15.872 110.08 15.872 9.728 0 19.456-0.512 29.184-1.024-6.144-20.992-9.728-43.008-9.728-65.536-0.512-137.728 117.248-249.344 266.752-249.344z m-168.96-84.992c23.552 0 39.424 15.36 39.424 38.912s-15.872 39.424-39.424 39.424-47.104-15.872-47.104-39.424c0-23.04 23.552-38.912 47.104-38.912zM280.576 362.496c-23.552 0-47.104-15.872-47.104-39.424s23.552-38.912 47.104-38.912 39.424 15.36 39.424 38.912c-0.512 24.064-15.872 39.424-39.424 39.424z m674.816 251.392c0-125.44-125.44-227.84-266.752-227.84-149.504 0-266.752 102.4-266.752 227.84s117.76 227.84 266.752 227.84c31.232 0 62.976-7.68 94.208-15.872l86.016 47.104-23.552-78.336c62.976-47.104 110.08-110.08 110.08-180.736z m-353.28-38.912c-15.872 0-31.232-15.36-31.232-31.232 0-15.872 15.872-31.232 31.232-31.232 23.552 0 39.424 15.872 39.424 31.232 0 15.36-15.36 31.232-39.424 31.232z m172.544 0c-15.36 0-31.232-15.36-31.232-31.232 0-15.872 15.872-31.232 31.232-31.232 23.552 0 39.424 15.872 39.424 31.232 0 15.36-15.872 31.232-39.424 31.232z"
                                        p-id="4228"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>“快速预约挂号”</p>
                            </div>
                            <div class="app">
                                <img src="../../assets/images/code_app.png">
                                <svg t="1706347549202" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5318" width="16" height="16">
                                    <path
                                        d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                                        p-id="5319"></path>
                                </svg>
                                <p>扫一扫下载</p>
                                <p>“预约挂号”APP</p>
                            </div>
                        </div>
                        <!-- 底部提示区域 -->
                        <div class="footer">
                            <p>尚医通官方指定平台</p>
                            <p>快速挂号 安全放心</p>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!-- 对话框底部插槽 -->
            <template #footer>
                <el-button type="primary" @click="closeLogin">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed,watch } from 'vue';
import { ElMessage } from 'element-plus';
// 引入API
import { reqWXLogin } from '@/api/hospital/index'
// 引入ts类型
import { WXLoginResponseData } from '@/api/hospital/type'
// 引入用户仓库
import useUserStore from '@/store/modules/user'
// 引入所需要的icon图标
import { User, Lock } from "@element-plus/icons-vue";
// 引入倒计时组件
import CountDown from '@/components/countdown/index.vue'
// 引入路由器与路由
import { useRoute,useRouter } from 'vue-router';

// 获取路由对象
let route = useRoute();
let router = useRouter();
// 控制倒计时组件的显示与隐藏
let flag = ref<boolean>(false)
// 创建仓库实例
let userStore = useUserStore();
// 控制手机登录|微信登录切换的场景值
let scene = ref<number>(0)
// 获取表单实例
let form = ref<any>()
// 收集表单数据---手机号码|验证码
let loginParam = reactive({
    phone: '',
    code: ''
})
// 手机号码正则判断
let isPhone = computed(() => {
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    return reg.test(loginParam.phone)
})

// 切换到微信登录的点击回调
const changeWechat = async () => {
    scene.value = 1
    // 重定向地址
    let redirect_uri = encodeURIComponent(window.location.origin + '/wxlogin')
    // 发送请求获取生成二维码所需要的数据
    let result:WXLoginResponseData = await reqWXLogin(redirect_uri)
    // 生成二维码页面
    //@ts-ignore
    new WxLogin({
        self_redirect: true,//true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
        id: "login_container",//显示二维码的容器id
        appid: result.data.appid,//应用唯一标识
        scope: "snsapi_login",//应用授权作用域
        redirect_uri: result.data.redirectUri,//重定向地址，需要进行UrlEncode,公司的code地址
        state: result.data.state,//当前本机接收数据的地址
        style: "black",
    });
}
// 切换到手机短信登录的点击回调
const gotoPhoneLogin = ()=>{
    // 切换场景值为0
    scene.value = 0
 }
// 关闭对话框的回调
const closeLogin = () => {
    userStore.dialogFormVisible = false
    // 清空表单数据
    Object.assign(loginParam,{
        phone:'',
        code:''
    })
    // 清除上一次的表单校验
    form.value.resetFields();
}
// 获取验证码按钮的回调
const getCode = async () => {
    //解决element-plus按钮禁用还能点击的问题
    if (!isPhone.value || flag.value) return;
    // 开启倒计时模式
    flag.value = true
    try {
        //获取验证码成功
        await userStore.getCode(loginParam.phone);
        loginParam.code = userStore.code;
    } catch (error) {
        ElMessage({
            type: "error",
            message: (error as Error).message,
        });
    }
}
// countdown组件的自定义事件
const getFlag = (val: boolean) => {
    flag.value = val
}
// 点击用户登录按钮回调
const login = async () => {
    // 表单校验通过才可以发送请求
    await form.value.validate()
    try {
        // 发起登录请求
        await userStore.userLogin(loginParam)
        // 请求成功了,就要关闭对话框
        userStore.dialogFormVisible = false
        // 要是有重定向就要跳回去,要不就跳到首页
        if(route.query.redirect){
            router.push(route.query.redirect as string)
        }else{
            router.push('/home')
        }
    } catch (error) {
        ElMessage({
            type: "error",
            message: (error as Error).message,
        });
    }
}
// 手机号码自定义校验规则
const validatorPhone = (rules:any,value:any,callback:any)=>{
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if(reg.test(value)){
        callback();
    }else{
        callback(new Error('请输入正确的手机号'))
    }
}
// 验证码自定义校验规则
const validatorCode = (rules: any, value: any, callback: any) => {
    const reg = /^\d{6}$/;
    if (reg.test(value)) {
        callback();
    } else {
        callback(new Error('请输入正确的验证码'))
    }
}
// 表单校验的规则
const rules = {
    phone: [{required:true,  trigger: 'change' ,validator: validatorPhone}],
    code: [{ required:true,trigger: 'change', validator: validatorCode }]
}
// 监听scene的变化
watch(()=>scene.value,(val:number)=>{
    // 如果展示的是微信扫码登录
    if(val === 1){
        userStore.queryState();
    }
})
</script>

<style scoped lang="scss">
.login_container {
    ::v-deep(.el-dialog__body) {
        border-top: 1px solid #c6c3c3;
        border-bottom: 1px solid #c6c3c3;
    }
    .wechatContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .phone{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p{
                margin: 10px 0px;
            }
        }
    }

    .login {
        border: 1px solid #c6c3c3;
        padding: 20px;

        .bottom {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            p {
                margin: 10px 0px;
            }
        }
    }

    .focus {
        display: flex;
        flex-direction: column;

        .top {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;

            .wechat {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;
                color: grag;

                p {
                    margin: 5px;
                }

                img {
                    width: 130px;
                    height: 130px;
                }
            }

            .app {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;

                p {
                    margin: 5px;
                }

                img {
                    width: 130px;
                    height: 130px;
                }
            }
        }

        .footer {
            font-size: 20px;
            font-weight: 700;
            text-align: center;

            p {
                margin: 15px;
            }
        }
    }
}</style>